<script lang="tsx" setup>
import PageHeader from '../../components/page-header.vue';
import {INIT_TAB_STYLE} from './constants';
import {generateCssVars} from '@vc/utils';
import SuperMonitor from './modules/super-monitor/index.vue';  //监督性监测
import SelfMonitor from './modules/self-monitor/index.vue';  //自行监测
import NoMonitor from './modules/no-monitor/index.vue'; //未开展监测
import OverProofMonitor from './modules/over-proof-monitor/index.vue';  //超标排放
import AbnormalFacility from './modules/abnormal-facility/index.vue';  //治污设施异常

interface Props {
  tabs: Record<string, any>;
}

const {tabs} = defineProps<Props>();

</script>

<template>
  <div class="container" :style="generateCssVars(INIT_TAB_STYLE, 'tabs')">
    <page-header :title="tabs.name" :menuId="tabs.id"/>
    <super-monitor
      v-if="tabs.functions?.[0]?.status === 0"
      :menuId="tabs.functions?.[0]?.id"
      :count="tabs.functions?.[0]?.count"
      :title="tabs.functions?.[0]?.name"/>
    <self-monitor
      v-if="tabs.functions?.[1]?.status === 0"
      :menuId="tabs.functions?.[1]?.id"
      :count="tabs.functions?.[1]?.count"
      :title="tabs.functions?.[1]?.name"/>
    <no-monitor
      v-if="tabs.functions?.[2]?.status === 0"
      :menuId="tabs.functions?.[2]?.id"
      :count="tabs.functions?.[2]?.count"
      :title="tabs.functions?.[2]?.name"/>
    <over-proof-monitor
      v-if="tabs.functions?.[3]?.status === 0"
      :menuId="tabs.functions?.[3]?.id"
      :count="tabs.functions?.[3]?.count"
      :title="tabs.functions?.[3]?.name"/>
    <abnormal-facility
      v-if="tabs.functions?.[4]?.status === 0"
      :menuId="tabs.functions?.[4]?.id"
      :count="tabs.functions?.[4]?.count"
      :title="tabs.functions?.[4]?.name"/>
  </div>
</template>

<style lang="scss" scoped>
.container {
  :deep(.descriptions) {
    .vc-descriptions__cell.is-bordered-label {
      background-color: rgba(231,247,243,0.3) !important;
    }

    .vc-descriptions__label {
      color: #666666;
    }

    .vc-descriptions__content {
      color: #111111;
    }

    .vc-descriptions__cell {
      padding: 6px 7px !important;
      font-size: 13px;
      border: 1px solid #F6F6F6;
      border-radius: 4px !important;
    }
  }
}
</style>
